<template>
	<a-card hoverable v-if="saveList.total>0">
		<template #title>
			全部收藏（{{saveList.total}}）
		</template>
		<a-space :size="10" direction="vertical" fill>
			<a-typography style="margin-bottom: -5%;width: 1000px;">
				<a-typography-paragraph>
					<a-space wrap direction="vertical" :size="100" align="start">
						<a-row style="margin-bottom: -25%;" justify="center" v-for="(item,index) in saveList.data"
							:key="index">
							<a-col>
								<div style="width: 78px;height: 78px;">
									<a-avatar :size="53" style="background-color: #14C9C9;">
										<img alt="无法显示" style="width: 100%;height: 100%;font-size: 10px;"
											:src="item.avatar" />
									</a-avatar>
								</div>
							</a-col>
							<a-col>
								<a-typography style="margin-left:27%;width: 163px;margin-top: -35%;">
									<a-typography-title
										style="font-weight: bold;font-size: 15px;height: 21px;margin-bottom: 1%;"
										ellipsis>
										{{item.nickName}}
									</a-typography-title>
									<a-typography-paragraph style="font-size: 12px;color: gray;height: auto;">
										{{item.publishTime}}
									</a-typography-paragraph>
									<a-link :href="'/modelEvaluating/' + item.mid" :hoverable="false" draggable="false">
										<a-typography-title style="font-weight: bold;font-size: 15px;height: 21px;margin-bottom: 1%;
										width: 900px;" ellipsis>
											{{item.title}}
										</a-typography-title>
										<a-typography-paragraph
											style="font-size: 12px;color: gray;height: auto;width: 900px;" :ellipsis="{
													        rows: 5
													      }">
											{{item.content}}
										</a-typography-paragraph>
									</a-link>
									<a-typography-paragraph>
										<a-image-preview-group>
											<a-space :size="30">
												<a-image :src="imageItem" 
													v-for="(imageItem,cIndex) in item.images.slice(0,4)" width="200"
													height="200" >
													<template #extra>
														<a-link :href="'/modelEvaluating/' + item.mid" :hoverable="false" 
														draggable="false">
													      <div v-if="cIndex == 3" style="width: 200px;height: 200px;
														 background-color: rgba(0,0,0,0.45);margin-left: -14%;color: white;">
																<span style="display: block;height: 200px;text-align: center;
																line-height: 200px;font-size: 25px;">
																	+{{item.images.length - 4}}
																</span>
													      </div>
														</a-link>
													</template>
												</a-image>
											</a-space>
										</a-image-preview-group>
									</a-typography-paragraph>
									<a-typography-paragraph>
										<a-space style="color: gray;">
											<icon-eye :size="16" />
											<span>{{item.watch}}</span>&nbsp;
											<span
											style="display: inline-block;width: 808px;text-align: right;
											margin-left: 5px;height: 16px;
											">
												<span style="cursor: pointer;" 
												@click="deleteMySave(item.aid)">删除</span>
											</span>
										</a-space>
									</a-typography-paragraph>
									<a-divider style="padding-right: 740px;" />
									<a-typography-title
										style="font-size: 12px;color: gray;height: auto;transform: translateX(250%);"
										v-if="isLastData(index)">
										已经是最后了
									</a-typography-title>
								</a-typography>
							</a-col>
						</a-row>
						<a-pagination :total="saveList.total" show-total show-jumper show-page-size
						:page-size-options="[1,5,10]" @change="changePageList" @page-size-change="changeSizeList"
						:page-size="currentPageSize"
						v-if="saveList.total > 0"/>
					</a-space>
				</a-typography-paragraph>
			</a-typography>
		</a-space>
	</a-card>
	<a-card hoverable v-else-if="saveList.total == 0">
		<template #title>
			全部收藏（0）
		</template>
		<a-result :status="null">
			<template #icon>
				<IconFaceFrownFill />
			</template>
			<template #title>这里什么也没有哦</template>
			<template #extra>
				<a-button type="primary" @click="()=>{router.push({path: '/index'});}">前往首页</a-button>
			</template>
			<a-typography style="background: var(--color-fill-2); padding: 24px;">
				<a-typography-paragraph>没有收藏的文章?</a-typography-paragraph>
				<ul>
					<li> 点击按钮移步到首页 </li>
					<li> 点击你感兴趣的评测 </li>
					<li> 你可以在评测页面收藏文章 </li>
				</ul>
			</a-typography>
		</a-result>
	</a-card>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		watch,
		inject,
		nextTick
	} from 'vue';

	import apiUrl from '@/constant/user/apiUrl.js';
	import userApi from '@/module/user/api/index.js';
	import jwt_decode from 'jwt-decode';
	import { Modal } from '@arco-design/web-vue';

	let {
		proxy
	} = getCurrentInstance();
	
	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	const props = defineProps({
		formVisible: Boolean,
		loginForm: Object,
		refrushAvatar: Boolean
	});

	const emit = defineEmits();

	const apiUrlHome =
		import.meta.env.VITE_API_URL_HOME;

	let saveList = reactive({});
	let currentPage = ref(1);
	let currentPageSize = ref(10);

	//判断最后一条数据的位置
	function isLastData(index){
		//如果数据总条数比每页条数还小,直接返回
		if(saveList.total <= currentPageSize.value){
			return saveList.total == index+1 ? true:false;
		}
		else if(saveList.total > currentPageSize.value){
			let restPages = saveList.total % currentPageSize.value;
			if(restPages == 0){
				let lastPages = saveList.total / currentPageSize.value;
				if(currentPage.value == lastPages && saveList.data.length-1 == index){
					return true;
				}
			}
			else if(restPages != 0){
				let lastPages = (saveList.total / currentPageSize.value) + 1;
				if(currentPage.value == lastPages && saveList.data.length-1 == index){
					return true;
				}
			}
		}
	}
	
	async function deleteMySave(aId){
		Modal.open({
		        title: '警告',
		        content: '确定要删除该条收藏吗?',
				async onOk(){
					let deleteStatus = reactive({});
					deleteStatus.resp = await userApi.deleteMySave(aId,jwt_decode(sessionStorage.getItem("token")).uid);
					console.log('deleteStatus.resp',deleteStatus.resp);
					if(deleteStatus.resp.flag == true){
						proxy.$message.success('删除成功');
						nextTick(()=>{
							loadingSaveList();
						})
					}
					else if(deleteStatus.resp.flag == false){
						proxy.$message.error('删除失败');
					}
				}
		      });
	}

	async function loadingSaveList() {
		saveList.resp = await userApi.getSaveList(jwt_decode(sessionStorage.getItem("token")).uid, {
			"currentPage": currentPage.value,
			"pageSize": currentPageSize.value,
			"queryString": ""
		});
		saveList.data = saveList.resp.data;
		saveList.total = saveList.resp.total;
		console.log('saveList.resp', saveList.resp);
		console.log('saveList', saveList.data);
		emit('getTab',ref(route.meta.tab));
		return saveList;
	}
	
	watch(()=>props.refrushAvatar,(NewValue,PreValue)=>{
		if(NewValue != PreValue){
			loadingSaveList();
		}
	});
	
	function changePageList(number){
		console.log('当前页数:',number);
		currentPage.value = number;
		loadingSaveList();
	}
	
	function changeSizeList(number){
		console.log('当前条数:',number);
		currentPageSize.value = number;
		loadingSaveList();
	}

	onMounted(() => {
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingSaveList();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/user/css/save.less';
</style>
